<template>
  <el-container style="height: 100vh;">
    <el-header :class="isCollapse ? 'collapse' : ''">
      <!-- 头部 LOGO 导航 -->
      <div class="logo">
          <img :class="isCollapse ? 'rotate' : 'norotate'" src="../assets/milktea.png" @click="isCollapse =!isCollapse"
            alt="" style="width: 50px; height: 50px" />
          <div class="logotext">
            <span><span class="tgreen">奶 茶</span> 点 单 后 台</span><br />
            <span>milk tea<span class="tyellow"> manage</span></span>
          </div>
        </div>
      <myhead></myhead>
    </el-header>
    <el-container style="padding: 0 20px; ">
      <el-aside width="null" :class="isCollapse ? 'shrink' : ''" style="background-color: rgb(84, 92, 100);">
        <mymenu :isCollapse="isCollapse"></mymenu>
      </el-aside>
      <el-container>
        <el-main :class="isCollapse ? 'collapse' : ''">
          <!-- 选项卡 头部 -->
          <el-tabs type="card" v-model="changetableTabsValue" closable 
          @tab-remove="removeTab" @tab-click="clickTab">
            <el-tab-pane v-for="item in tableTabs" :key="item.name" :label="item.title" :name="item.name">
              <span slot="label"><i :class="item.icon"></i>
                {{ item.title }}</span>
            </el-tab-pane>
          </el-tabs>

          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
import myhead from "./layout/MyHead.vue"
import mymenu from "./layout/MyMenu.vue"
import { mapState, mapMutations } from 'vuex'

export default {


  name: 'indexpage',
  data() {
    return {
      isCollapse:true
    }
  },
  computed:{
    ...mapState(['tableTabsValue', 'tableTabs']),

    //通过计算属性的方式 达到可以 v-model store 中的属性共享
    changetableTabsValue: {
      get: function () {
        return this.tableTabsValue;
      },
      set: function (value) {
        this.edittableTabsValue(value);
      }
    }
  },
  methods: {
    ...mapMutations(['clickTab', 'removeTab', 'edittableTabsValue']),
  },
  components: {
    myhead, mymenu
  }

}
</script>

<style scoped>
.logo {
  width: 170px;
  float: left;
  height: 50px;
  background-color: rgb(84, 92, 100);
  color: aliceblue;
  padding: 5px 20px 5px 10px;
  transition: width 0.3s;
}

.logo img {
  float: left;
}

.el-header {
  padding: 0px !important;
  margin: 0px 20px;
  background-color: rgb(84, 92, 100);
}

.el-header.collapse .logo {
  width: 54px;
  padding-right: 0px;
  transition: width 0.3s;
}

.rotate {
  transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  /* IE 9 */
  -moz-transform: rotate(0deg);
  /* Firefox */
  -webkit-transform: rotate(0deg);
  /* Safari 和 Chrome */
  -o-transform: rotate(0deg);
  /* Opera */
  transition: transform 0.3s;
  transition: -ms-transform 0.3s;
  transition: -moz-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: -o-transform 0.3s;
}

.norotate {
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  /* IE 9 */
  -moz-transform: rotate(45deg);
  /* Firefox */
  -webkit-transform: rotate(45deg);
  /* Safari 和 Chrome */
  -o-transform: rotate(45deg);
  /* Opera */
  transition: transform 0.3s;
  transition: -ms-transform 0.3s;
  transition: -moz-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: -o-transform 0.3s;
}

.logotext {
  display: block;
  transition: display 0.3s;
  float: left;
  font-size: 14px;
  margin-top: 8px;
}

.collapse .logotext {
  width: 0px;
  transition: width 0.3s;
  display: none;
  transition: display 0.3s;
}

.tyellow {
  color: rgb(245, 171, 0);
}

.tgreen {
  color: rgb(0, 164, 94);
}

.tblue {
  color: rgb(0, 172, 168);
}

/*自定义布局样式 */
.el-aside {
  width: 200px !important;
  position: fixed;
  left: 20px;
  top: 60px;
  bottom: 0;
  z-index: 666;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  background-color: rgb(84, 92, 100) !important;
  transition: all 0.3s;
}

.el-aside.shrink {
  width: 64px !important;
  transition: width 0.3s;
  transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1)
}

.el-main {
  position: fixed;
  left: 230px;
  right: 0;
  top: 68px;
  bottom: 68px;
  z-index: 998;
  width: auto;
  overflow-y: auto;
  /* background-color: red; */
  margin-right: 28px;
  transition: all 0.3s;
}
.el-footer{
  position: fixed;
  left: 230px;
  bottom: 0;
  width: auto;
  line-height: 60px;
  margin-right: 28px;
  padding: 0px 20px;
}

.collapse {
  transition: left 0.3s;
  left: 95px;
}

.el-icon {
  margin-right: 5px;
}
</style>